<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <image src="/static/images/drone-logo.png" class="logo" mode="widthFix" alt="无人机App logo"></image>
      <text class="title">无人机人才平台</text>
      <text class="subtitle">请选择您的角色</text>
    </view>
    
    <!-- 角色选择卡片区域 -->
    <view class="role-cards">
      <!-- 求职角色 -->
      <view class="role-card" @click="selectRole('seeker')" :class="{ selected: selectedRole === 'seeker' }">
        <view class="icon-wrapper">
          <i class="iconfont icon-user"></i>
          <image src="/static/images/drone-seeker.png" class="drone-icon" mode="widthFix" alt="求职者图标"></image>
        </view>
        <text class="role-title">求职</text>
        <text class="role-desc">寻找无人机相关的理想工作机会</text>
        <view class="select-indicator" v-if="selectedRole === 'seeker'">
          <u-icon name="checkbox-mark" color="#fff"></u-icon> 
        </view>
      </view>
      
      <!-- 招聘角色 -->
      <view class="role-card" @click="selectRole('recruiter')" :class="{ selected: selectedRole === 'recruiter' }">
        <view class="icon-wrapper">
          <i class="iconfont icon-briefcase"></i>
          <image src="/static/images/drone-recruit.png" class="drone-icon" mode="widthFix" alt="招聘者图标"></image>
        </view>
        <text class="role-title">招聘</text>
        <text class="role-desc">为团队招募专业的无人机人才</text>
        <view class="select-indicator" v-if="selectedRole === 'recruiter'">
           <u-icon name="checkbox-mark" color="#fff"></u-icon> 
        </view>
      </view>
      
      <!-- 抢单角色 -->
      <view class="role-card" @click="selectRole('grabber')" :class="{ selected: selectedRole === 'grabber' }">
        <view class="icon-wrapper">
          <i class="iconfont icon-rocket"></i>
          <image src="/static/images/drone-grab.png" class="drone-icon" mode="widthFix" alt="抢单者图标"></image>
        </view>
        <text class="role-title">抢单挣外快</text>
        <text class="role-desc">接取无人机任务，灵活赚取收入</text>
        <view class="select-indicator" v-if="selectedRole === 'grabber'">
           <u-icon name="checkbox-mark" color="#fff"></u-icon> 
        </view>
      </view>
    </view>
    
    <!-- 确认按钮 -->
    <button class="confirm-btn" :disabled="!selectedRole" @click="confirmSelection">
      确认选择
    </button>
    
    <!-- 底部说明 -->
    <view class="footer">
      <text class="footer-text">后续可在设置中更改角色</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedRole: '', // 当前选中的角色
      roleMap: {
        seeker: {
          name: '求职者',
          path: '/pages/roleSelect/seeker/seeker'
        },
        recruiter: {
          name: '招聘方',
          path: '/pages/roleSelect/recruiter/recruiter'
        },
        grabber: {
          name: '抢单者',
          path: '/pages/roleSelect/grabber/grabber'
        }
      }
    };
  },
  onLoad() {
    // 检查是否已有保存的角色
    const savedRole = uni.getStorageSync('selectedRole');
    if (savedRole && this.roleMap[savedRole]) {
      this.selectedRole = savedRole;
    }
  },
  methods: {
    // 选择角色
    selectRole(role) {
      this.selectedRole = role;
      
      // 添加选择动画反馈
      const el = this.$refs[role][0];
      if (el) {
        el.classList.add('pulse');
        setTimeout(() => {
          el.classList.remove('pulse');
        }, 500);
      }
    },
    
    // 确认选择并保存
    confirmSelection() {
      if (!this.selectedRole) return;
      
      // 保存角色到本地缓存
      uni.setStorageSync('selectedRole', this.selectedRole);
      uni.setStorageSync('userRoleInfo', this.roleMap[this.selectedRole]);
      
      // 显示提示
      uni.showToast({
        title: `已选择${this.roleMap[this.selectedRole].name}角色`,
        icon: 'success',
        duration: 1500
      });
      
      // 延迟跳转对应角色的首页
      setTimeout(() => {
        uni.reLaunch({
          url: this.roleMap[this.selectedRole].path
        });
      }, 1500);
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf1 100%);
  padding: 0 24rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0 60rpx;
}

.logo {
  width: 140rpx;
  height: 140rpx;
  margin-bottom: 30rpx;
  border-radius: 50%;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1a365d;
  margin-bottom: 12rpx;
}

.subtitle {
  font-size: 26rpx;
  color: #64748b;
}

.role-cards {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 60rpx;
  flex-grow: 1;
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.role-card:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 15rpx 35rpx rgba(0, 0, 0, 0.1);
}

.role-card.selected {
  border: 2rpx solid #3b82f6;
  background-color: #f0f9ff;
}

.icon-wrapper {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.iconfont {
  font-size: 80rpx;
  color: #3b82f6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.drone-icon {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.role-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 15rpx;
}

.role-desc {
  font-size: 24rpx;
  color: #64748b;
  text-align: center;
  max-width: 500rpx;
  line-height: 1.5;
}

.select-indicator {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-indicator .iconfont {
  font-size: 24rpx;
  color: white;
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #3b82f6;
  color: white;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 10rpx 25rpx rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.confirm-btn:disabled {
  background-color: #94a3b8;
  box-shadow: none;
}

.confirm-btn:not(:disabled):hover {
  background-color: #2563eb;
  transform: translateY(-2rpx);
}

.footer {
  display: flex;
  justify-content: center;
  padding-bottom: 40rpx;
}

.footer-text {
  font-size: 22rpx;
  color: #94a3b8;
}

/* 动画效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 0.5s ease-in-out;
}
</style>
